<template>
  <div class="about-us">
    <ServiceNav />
    
    <!-- 顶部元宇宙星球背景 -->
    <div class="hero-section">
      <div class="stars-bg"></div>
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">关于我们</h1>
          <p class="hero-subtitle">成都九天星空科技有限公司 × 斑马中国</p>
          <div class="animated-text">
            <span>数字版权全产业链服务商</span>
          </div>
        </div>
      </div>
      <div class="data-flow">
        <div class="data-particle" v-for="n in 20" :key="n"></div>
      </div>
    </div>
    
    <!-- 平台定位 -->
    <div class="position-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">平台定位</h2>
          <div class="section-line"></div>
        </div>
        
        <div class="position-cards">
          <div class="position-card" v-for="(position, index) in platformPositions" :key="index">
            <div class="card-number">0{{ index + 1 }}</div>
            <h3>{{ position.title }}</h3>
            <p>{{ position.description }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 核心技术能力 -->
    <div class="technology-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">核心技术能力</h2>
          <div class="section-line"></div>
        </div>
        
        <div class="tech-wrapper">
          <div class="tech-content">
            <div class="tech-item" v-for="(tech, index) in coreTechnologies" :key="index">
              <div class="tech-icon">
                <el-icon :size="48"><component :is="tech.icon" /></el-icon>
              </div>
              <div class="tech-info">
                <h3>{{ tech.title }}</h3>
                <p>{{ tech.description }}</p>
              </div>
            </div>
          </div>
          
          <div class="blockchain-visual">
            <div class="blockchain-container">
              <div v-for="n in 8" :key="n" class="blockchain-node" :class="`node-${n}`">
                <div class="node-inner"></div>
                <div class="node-pulse"></div>
              </div>
              <div v-for="n in 12" :key="`line-${n}`" class="blockchain-line" :class="`line-${n}`"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 产品矩阵 -->
    <div class="products-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">产品矩阵</h2>
          <div class="section-line"></div>
        </div>
        
        <el-tabs tab-position="left" class="product-tabs">
          <el-tab-pane label="数字版权AI平台" name="ai-platform">
            <div class="product-category">
              <h3>数字版权AI平台</h3>
              <p>基于人工智能技术，提供高效的数字版权管理解决方案</p>
              
              <div class="products-grid">
                <div class="product-card">
                  <div class="product-icon">
                    <el-icon :size="36"><DocumentChecked /></el-icon>
                  </div>
                  <h4>AI审核登记系统</h4>
                  <p>基于AI技术的智能内容审核与版权登记系统，提高登记效率90%</p>
                </div>
                <div class="product-card">
                  <div class="product-icon">
                    <el-icon :size="36"><ChatLineRound /></el-icon>
                  </div>
                  <h4>AI智能体</h4>
                  <p>智能会话系统，提供专业版权咨询与服务，全天候响应用户需求</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="数据资产化服务" name="data-asset">
            <div class="product-category">
              <h3>数据资产化服务</h3>
              <p>将海量数据转化为可衡量的价值资产，释放数据潜力</p>
              
              <div class="products-grid">
                <div class="product-card">
                  <div class="product-icon">
                    <el-icon :size="36"><DataAnalysis /></el-icon>
                  </div>
                  <h4>数据深度挖掘</h4>
                  <p>基于大数据技术，挖掘数据价值，提供数据智能分析服务</p>
                </div>
                <div class="product-card">
                  <div class="product-icon">
                    <el-icon :size="36"><PieChart /></el-icon>
                  </div>
                  <h4>数据资产评估解决方案</h4>
                  <p>专业的数据资产价值评估体系，科学量化数据资产价值</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <!-- 核心优势 -->
    <div class="advantages-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">核心优势</h2>
          <div class="section-line"></div>
        </div>
        
        <div class="advantages-grid">
          <div class="advantage-card">
            <div class="advantage-icon">
              <el-icon :size="48"><Connection /></el-icon>
            </div>
            <h3>四链融合生态</h3>
            <p>产业链/价值链/创新链/生态链协同，打造完整版权生态系统</p>
            <div class="advantage-tag">产业优势</div>
          </div>
          
          <div class="advantage-card">
            <div class="advantage-icon">
              <el-icon :size="48"><DataLine /></el-icon>
            </div>
            <h3>数据资产转化能力</h3>
            <p>百万级数据→千万级价值产品，实现数据价值最大化</p>
            <div class="advantage-tag">技术优势</div>
          </div>
          
          <div class="advantage-card">
            <div class="advantage-icon">
              <el-icon :size="48"><Lock /></el-icon>
            </div>
            <h3>合规性保障</h3>
            <p>接入四川省区块链基础设施"文创链"，确保数据安全与合规</p>
            <div class="advantage-tag">政策优势</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 生态图谱演示 -->
    <div class="ecosystem-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">四链融合生态图谱</h2>
          <div class="section-line"></div>
        </div>
        
        <div class="ecosystem-visual">
          <div class="eco-center">
            <div class="center-node">斑马中国</div>
          </div>
          
          <div class="eco-chain industry-chain">
            <div class="chain-label">产业链</div>
            <div class="chain-nodes">
              <div class="eco-node" v-for="(node, i) in industryChain" :key="i">
                {{ node }}
              </div>
            </div>
          </div>
          
          <div class="eco-chain value-chain">
            <div class="chain-label">价值链</div>
            <div class="chain-nodes">
              <div class="eco-node" v-for="(node, i) in valueChain" :key="i">
                {{ node }}
              </div>
            </div>
          </div>
          
          <div class="eco-chain innovation-chain">
            <div class="chain-label">创新链</div>
            <div class="chain-nodes">
              <div class="eco-node" v-for="(node, i) in innovationChain" :key="i">
                {{ node }}
              </div>
            </div>
          </div>
          
          <div class="eco-chain ecosystem-chain">
            <div class="chain-label">生态链</div>
            <div class="chain-nodes">
              <div class="eco-node" v-for="(node, i) in ecosystemChain" :key="i">
                {{ node }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 企业发展历程 -->
    <div class="timeline-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">企业发展历程</h2>
          <div class="section-line"></div>
        </div>
        
        <div class="timeline-3d">
          <div class="timeline-viewport" ref="timelineViewport">
            <div class="timeline-track" :style="{ transform: `translateX(${timelinePosition}px)` }">
              <div class="timeline-item" v-for="(milestone, index) in timeline" :key="index">
                <div class="timeline-year">{{ milestone.year }}</div>
                <div class="timeline-content">
                  <h3>{{ milestone.title }}</h3>
                  <p>{{ milestone.description }}</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="timeline-controls">
            <el-button-group>
              <el-button @click="movePrev" icon="ArrowLeft">上一个</el-button>
              <el-button @click="moveNext" icon="ArrowRight">下一个</el-button>
            </el-button-group>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 数据价值转化演示 -->
    <div class="data-value-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">数据价值转化演示</h2>
          <div class="section-line"></div>
        </div>
        
        <div class="data-value-demo">
          <div class="data-flow-animation">
            <div class="data-source">
              <div class="data-label">原始数据</div>
              <div class="data-count"><span class="count-number">{{ dataSource }}</span>+</div>
              <div class="data-unit">数据量(条)</div>
            </div>
            
            <div class="data-process">
              <div class="process-steps">
                <div class="process-step">
                  <div class="step-icon"><el-icon><Filter /></el-icon></div>
                  <div class="step-name">清洗</div>
                </div>
                <div class="process-step">
                  <div class="step-icon"><el-icon><Aim /></el-icon></div>
                  <div class="step-name">分析</div>
                </div>
                <div class="process-step">
                  <div class="step-icon"><el-icon><Histogram /></el-icon></div>
                  <div class="step-name">建模</div>
                </div>
                <div class="process-step">
                  <div class="step-icon"><el-icon><GoodsFilled /></el-icon></div>
                  <div class="step-name">产品化</div>
                </div>
              </div>
            </div>
            
            <div class="data-result">
              <div class="data-label">价值产出</div>
              <div class="data-count"><span class="count-number">{{ dataValue }}</span>+</div>
              <div class="data-unit">价值(万元)</div>
            </div>
          </div>
          
          <div class="value-control">
            <el-button type="primary" @click="startDataDemo">演示数据流转</el-button>
            <el-slider v-model="dataScale" :min="1" :max="10" @change="updateDataValues" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- 虚拟偶像IP展示 -->
    <div class="virtual-idol-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">虚拟偶像IP展示</h2>
          <div class="section-line"></div>
        </div>
        
        <div class="idol-carousel">
          <el-carousel height="400px" indicator-position="outside" type="card">
            <el-carousel-item v-for="(idol, index) in virtualIdols" :key="index">
              <div class="idol-card">
                <div class="idol-image">
                  <img :src="idol.image" :alt="idol.name">
                </div>
                <div class="idol-info">
                  <h3>{{ idol.name }}</h3>
                  <p>{{ idol.role }}</p>
                  <div class="idol-desc">{{ idol.description }}</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, reactive } from 'vue';
import { Connection, Lock, DataLine, DocumentChecked, ChatLineRound, DataAnalysis, 
         PieChart, ArrowLeft, ArrowRight, Filter, Aim, Histogram, GoodsFilled } from '@element-plus/icons-vue';
import ServiceNav from '@/components/ServiceNav.vue';
import Footer from '@/components/Footer.vue';

export default defineComponent({
  name: 'AboutUs',
  components: {
    ServiceNav,
    Footer,
    Connection,
    Lock,
    DataLine,
    DocumentChecked,
    ChatLineRound,
    DataAnalysis,
    PieChart,
    ArrowLeft,
    ArrowRight,
    Filter,
    Aim,
    Histogram,
    GoodsFilled
  },
  setup() {
    const platformPositions = [
      {
        title: '国家级文化数字化战略实施平台',
        description: '作为数字中国战略的重要组成部分，我们致力于推动文化数字化转型，促进文化产业和数字技术深度融合。'
      },
      {
        title: '数字版权全产业链服务商',
        description: '提供从创作到交易的全链路版权服务，覆盖确权、授权、维权、交易等全流程。'
      },
      {
        title: '区块链+大数据+AI的版权融合中台',
        description: '基于前沿技术打造的版权服务中台，为文化创意产业提供强大的技术支撑。'
      }
    ];
    
    const coreTechnologies = [
      {
        icon: 'Connection',
        title: '数字内容全生命周期管理',
        description: '确权→授权→用权→鉴权，构建完整的数字内容管理生态，确保版权安全与价值最大化。'
      },
      {
        icon: 'DataLine',
        title: '超大规模数据处理能力',
        description: '成功治理10亿条数据资产，通过大数据技术实现高效数据治理与价值挖掘。'
      }
    ];
    
    const timeline = [
      {
        year: '2019',
        title: '公司成立',
        description: '成都九天星空科技有限公司成立，专注于数字版权技术研发。'
      },
      {
        year: '2020',
        title: '平台上线',
        description: '斑马中国数字版权平台正式上线，提供版权确权服务。'
      },
      {
        year: '2021',
        title: '区块链技术应用',
        description: '接入四川省区块链基础设施"文创链"，实现版权数据上链。'
      },
      {
        year: '2022',
        title: 'AI技术赋能',
        description: '引入AI技术，推出智能审核与登记系统，效率提升90%。'
      },
      {
        year: '2023',
        title: '数据资产化服务',
        description: '推出数据资产评估解决方案，成功将百万级数据转化为千万级价值产品。'
      },
      {
        year: '2024',
        title: 'AI智能体上线',
        description: '推出版权智能体系统，实现7*24小时智能版权服务。'
      },
      {
        year: '2025',
        title: '全球化布局',
        description: '计划拓展海外市场，构建全球数字版权服务网络。'
      }
    ];
    
    const virtualIdols = [
      {
        name: '小马哥',
        role: '版权顾问',
        description: '专业的版权顾问虚拟形象，拥有海量版权知识库，能够提供专业的版权咨询服务。',
        image: 'https://via.placeholder.com/300x400?text=小马哥'
      },
      {
        name: '斑马小智',
        role: '数据分析师',
        description: '数据分析专家，善于挖掘数据价值，为用户提供数据资产评估与分析服务。',
        image: 'https://via.placeholder.com/300x400?text=斑马小智'
      },
      {
        name: '版宝',
        role: '创作助手',
        description: '创作者的得力助手，提供创作灵感、版权保护建议，全方位服务创作者。',
        image: 'https://via.placeholder.com/300x400?text=版宝'
      }
    ];
    
    const industryChain = ['创作者', '内容平台', '出版机构', '传媒公司', '授权方'];
    const valueChain = ['确权登记', '价值评估', '交易流通', '授权管理', '维权服务'];
    const innovationChain = ['区块链技术', 'AI应用', '大数据分析', '智能合约'];
    const ecosystemChain = ['政府部门', '行业协会', '金融机构', '法律服务', '技术提供商'];
    
    // 时间轴控制
    const timelinePosition = ref(0);
    const currentIndex = ref(0);
    const timelineViewport = ref(null);
    
    const movePrev = () => {
      if (currentIndex.value > 0) {
        currentIndex.value--;
        timelinePosition.value += 300;
      }
    };
    
    const moveNext = () => {
      if (currentIndex.value < timeline.length - 1) {
        currentIndex.value++;
        timelinePosition.value -= 300;
      }
    };
    
    // 数据价值演示
    const dataSource = ref(100);
    const dataValue = ref(10);
    const dataScale = ref(1);
    const isAnimating = ref(false);
    
    const updateDataValues = (scale) => {
      dataSource.value = scale * 100;
      dataValue.value = scale * 10;
    };
    
    const startDataDemo = () => {
      if (isAnimating.value) return;
      
      isAnimating.value = true;
      const originalSource = dataSource.value;
      const originalValue = dataValue.value;
      
      // 动画效果：先将数值清零，然后逐渐增加到目标值
      dataSource.value = 0;
      dataValue.value = 0;
      
      let current = 0;
      const target = originalSource;
      const increment = Math.ceil(target / 50);
      
      const interval = setInterval(() => {
        current += increment;
        if (current >= target) {
          current = target;
          clearInterval(interval);
          setTimeout(() => {
            isAnimating.value = false;
          }, 500);
        }
        
        dataSource.value = current;
        dataValue.value = Math.round(current / 10);
      }, 30);
    };
    
    onMounted(() => {
      // 初始化数据
      updateDataValues(dataScale.value);
      
      // 数据流动画
      const dataParticles = document.querySelectorAll('.data-particle');
      dataParticles.forEach((particle, index) => {
        const delay = index * 0.2;
        const duration = 2 + Math.random() * 2;
        particle.style.animationDelay = `${delay}s`;
        particle.style.animationDuration = `${duration}s`;
      });
    });
    
    return {
      platformPositions,
      coreTechnologies,
      timeline,
      virtualIdols,
      industryChain,
      valueChain,
      innovationChain,
      ecosystemChain,
      timelinePosition,
      currentIndex,
      timelineViewport,
      movePrev,
      moveNext,
      dataSource,
      dataValue,
      dataScale,
      updateDataValues,
      startDataDemo
    };
  }
});
</script>

<style lang="scss" scoped>
@use '@/assets/scss/_variables' as *;
@use '@/assets/scss/_mixins' as *;

.about-us {
  min-height: 100vh;
  position: relative;
}

// 顶部英雄区域
.hero-section {
  height: 100vh;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #0B0E1E, #1A2036);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .stars-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('@/assets/images/stars-bg.jpg');
    background-size: cover;
    opacity: 0.5;
    z-index: 1;
  }
  
  .container {
    position: relative;
    z-index: 3;
    text-align: center;
  }
  
  .hero-content {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .hero-title {
    font-size: 60px;
    font-weight: bold;
    margin-bottom: $spacing-large;
    background: linear-gradient(90deg, #4BC0C0, #36A9E1, #9966FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 1s ease-out;
  }
  
  .hero-subtitle {
    font-size: $font-size-large;
    opacity: 0.8;
    margin-bottom: $spacing-extra-large;
    animation: fadeInUp 1s ease-out 0.3s backwards;
  }
  
  .animated-text {
    font-size: 32px;
    font-weight: bold;
    animation: fadeInUp 1s ease-out 0.6s backwards;
    
    span {
      position: relative;
      
      &:after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 3px;
        background: $primary-color;
        animation: lineExpand 1.5s ease-out 1.2s forwards;
        transform: scaleX(0);
        transform-origin: left;
      }
    }
  }

  // 数据流粒子效果
  .data-flow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    
    .data-particle {
      position: absolute;
      width: 2px;
      height: 2px;
      background-color: rgba(59, 130, 246, 0.8);
      border-radius: 50%;
      box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.4);
      animation: dataFlowAnimation infinite linear;
      
      @for $i from 1 through 20 {
        &:nth-child(#{$i}) {
          left: random(100) * 1%;
          top: random(100) * 1%;
        }
      }
    }
  }
}

// 平台定位
.position-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .position-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
    }
  }
  
  .position-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    position: relative;
    transition: transform 0.3s ease;
    border-top: 3px solid $primary-color;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .card-number {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 36px;
      font-weight: bold;
      color: rgba($primary-color, 0.1);
    }
    
    h3 {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    p {
      color: $text-regular;
      line-height: 1.6;
    }
  }
}

// 核心技术能力
.technology-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .tech-wrapper {
    display: flex;
    align-items: center;
    gap: $spacing-extra-large;
    
    @media (max-width: 992px) {
      flex-direction: column;
    }
  }
  
  .tech-content {
    flex: 1;
  }
  
  .tech-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: $spacing-large;
    
    .tech-icon {
      color: $primary-color;
      margin-right: $spacing-base;
      flex-shrink: 0;
    }
    
    .tech-info {
      h3 {
        font-size: $font-size-large;
        color: $text-primary;
        margin-bottom: $spacing-small;
      }
      
      p {
        color: $text-regular;
        line-height: 1.6;
      }
    }
  }
  
  .blockchain-visual {
    flex: 1;
    min-height: 400px;
    position: relative;
    
    .blockchain-container {
      position: relative;
      width: 100%;
      height: 400px;
    }
    
    .blockchain-node {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba($primary-color, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      
      .node-inner {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: $primary-color;
      }
      
      .node-pulse {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid $primary-color;
        animation: pulse 2s infinite;
      }
      
      // 随机位置
      @for $i from 1 through 8 {
        &.node-#{$i} {
          top: #{(($i - 1) % 4) * 100 + 50}px;
          left: #{floor(($i - 1) / 4) * 300 + 50}px;
        }
      }
    }
    
    .blockchain-line {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, rgba($primary-color, 0.5), rgba($primary-color, 0.2));
      transform-origin: left center;
      
      @for $i from 1 through 12 {
        &.line-#{$i} {
          width: 150px;
          top: #{(($i - 1) % 4) * 100 + 75}px;
          left: #{floor(($i - 1) / 4) * 100 + 50}px;
          transform: rotate(#{random(360)}deg);
        }
      }
    }
  }
}

// 产品矩阵
.products-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .product-tabs {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .product-category {
    h3 {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    p {
      color: $text-regular;
      margin-bottom: $spacing-large;
    }
  }
  
  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
  
  .product-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: $box-shadow-base;
    }
    
    .product-icon {
      color: $primary-color;
      margin-bottom: $spacing-base;
    }
    
    h4 {
      font-size: $font-size-medium;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    p {
      color: $text-regular;
      line-height: 1.6;
    }
  }
}

// 核心优势
.advantages-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-large;
    
    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 576px) {
      grid-template-columns: 1fr;
    }
  }
  
  .advantage-card {
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    padding: $spacing-large;
    box-shadow: $box-shadow-light;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    &:hover {
      transform: translateY(-10px);
      box-shadow: $box-shadow-base;
    }
    
    .advantage-icon {
      color: $primary-color;
      margin-bottom: $spacing-base;
    }
    
    h3 {
      font-size: $font-size-large;
      color: $text-primary;
      margin-bottom: $spacing-small;
    }
    
    p {
      color: $text-regular;
      line-height: 1.6;
      margin-bottom: $spacing-large;
    }
    
    .advantage-tag {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: $spacing-small;
      background-color: $primary-color;
      color: white;
      border-bottom-left-radius: $border-radius-base;
      border-bottom-right-radius: $border-radius-base;
    }
  }
}

// 生态图谱
.ecosystem-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .ecosystem-visual {
    position: relative;
    height: 600px;
    margin: 0 auto;
    max-width: 1000px;
    
    .eco-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
      
      .center-node {
        width: 120px;
        height: 120px;
        background-color: $primary-color;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: $font-size-medium;
        font-weight: bold;
        box-shadow: 0 0 30px rgba($primary-color, 0.5);
      }
    }
    
    .eco-chain {
      position: absolute;
      width: 300px;
      
      .chain-label {
        font-size: $font-size-medium;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: $spacing-base;
        text-align: center;
      }
      
      .chain-nodes {
        display: flex;
        flex-direction: column;
        gap: $spacing-small;
      }
      
      .eco-node {
        background-color: white;
        padding: $spacing-small $spacing-base;
        border-radius: $border-radius-base;
        box-shadow: $box-shadow-light;
        text-align: center;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: translateX(5px);
          background-color: rgba($primary-color, 0.1);
        }
      }
      
      &.industry-chain {
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
      }
      
      &.value-chain {
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
      }
      
      &.innovation-chain {
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
      }
      
      &.ecosystem-chain {
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
      }
    }
  }
}

// 企业发展历程
.timeline-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .timeline-container {
    overflow: hidden;
    position: relative;
  }
  
  .timeline-scroller {
    width: 100%;
    overflow-x: hidden;
  }
  
  .timeline {
    display: flex;
    position: relative;
    transition: transform 0.5s ease;
    transform: translateX(v-bind(timelinePosition + 'px'));
    
    &:before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 4px;
      background-color: $primary-color;
      transform: translateY(-50%);
    }
  }
  
  .timeline-item {
    flex: 0 0 300px;
    padding: 0 $spacing-base;
    text-align: center;
    
    .timeline-year {
      width: 80px;
      height: 80px;
      background-color: $primary-color;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $font-size-large;
      font-weight: bold;
      margin: 0 auto $spacing-base;
      position: relative;
      z-index: 1;
    }
    
    .timeline-content {
      background-color: white;
      padding: $spacing-base;
      border-radius: $border-radius-base;
      box-shadow: $box-shadow-light;
      
      h3 {
        font-size: $font-size-medium;
        color: $text-primary;
        margin-bottom: $spacing-small;
      }
      
      p {
        color: $text-regular;
        font-size: $font-size-small;
      }
    }
  }
  
  .timeline-controls {
    display: flex;
    justify-content: center;
    margin-top: $spacing-large;
    gap: $spacing-base;
  }
}

// 虚拟偶像展示
.virtual-idol-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  
  .idol-carousel {
    max-width: 1000px;
    margin: 0 auto;
    
    .idol-card {
      height: 400px;
      border-radius: $border-radius-base;
      overflow: hidden;
      position: relative;
      box-shadow: $box-shadow-base;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      
      .idol-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        padding: $spacing-large $spacing-base $spacing-base;
        color: white;
        transform: translateY(100px);
        transition: transform 0.5s ease;
        
        h3 {
          font-size: $font-size-large;
          margin-bottom: $spacing-small;
        }
        
        p {
          font-size: $font-size-small;
          opacity: 0.8;
        }
        
        .idol-tags {
          display: flex;
          gap: $spacing-small;
          margin-top: $spacing-small;
          
          .el-tag {
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
          }
        }
      }
      
      &:hover {
        img {
          transform: scale(1.05);
        }
        
        .idol-info {
          transform: translateY(0);
        }
      }
    }
  }
}

// 数据价值转化展示
.data-transformation-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
  
  .data-demo {
    max-width: 800px;
    margin: 0 auto;
    padding: $spacing-large;
    background-color: $background-color-white;
    border-radius: $border-radius-base;
    box-shadow: $box-shadow-light;
  }
  
  .data-transformation-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $spacing-large;
    
    @media (max-width: 768px) {
      flex-direction: column;
      gap: $spacing-large;
    }
    
    .data-source, .data-value {
      text-align: center;
    }
    
    .data-arrow {
      font-size: 36px;
      color: $primary-color;
      
      @media (max-width: 768px) {
        transform: rotate(90deg);
      }
    }
    
    .data-number {
      font-size: 48px;
      font-weight: bold;
      color: $text-primary;
      margin-bottom: $spacing-small;
      
      .unit {
        font-size: $font-size-medium;
        color: $text-secondary;
      }
    }
    
    .data-label {
      font-size: $font-size-medium;
      color: $text-secondary;
    }
  }
  
  .data-controls {
    display: flex;
    justify-content: center;
    gap: $spacing-base;
  }
  
  .data-scale-slider {
    max-width: 400px;
    margin: $spacing-large auto;
  }
}

// 页脚CTA部分
.cta-section {
  padding: $spacing-extra-large 0;
  background: linear-gradient(135deg, $primary-color 0%, lighten($primary-color, 15%) 100%);
  color: white;
  text-align: center;
  
  .cta-title {
    font-size: $font-size-extra-large;
    margin-bottom: $spacing-small;
  }
  
  .cta-desc {
    font-size: $font-size-medium;
    opacity: 0.9;
    margin-bottom: $spacing-large;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .cta-buttons {
    display: flex;
    justify-content: center;
    gap: $spacing-base;
    
    @media (max-width: 576px) {
      flex-direction: column;
      align-items: center;
    }
  }
}

// 全局样式和组件
.section-header {
  text-align: center;
  margin-bottom: $spacing-extra-large;
  
  .section-title {
    font-size: $font-size-extra-large;
    color: $text-primary;
    margin-bottom: $spacing-small;
  }
  
  .section-line {
    width: 60px;
    height: 4px;
    background-color: $primary-color;
    margin: 0 auto;
  }
}

// 动画关键帧
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineExpand {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
}

@keyframes dataFlowAnimation {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-100px) translateX(100px) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) translateX(200px) scale(1);
  }
}

// 响应式调整
@media (max-width: 992px) {
  .hero-section {
    .hero-title {
      font-size: 48px;
    }
    
    .animated-text {
      font-size: 24px;
    }
  }
  
  .ecosystem-visual {
    height: auto;
    padding: $spacing-extra-large 0;
    
    .eco-center {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      margin: 0 auto $spacing-extra-large;
      
      .center-node {
        margin: 0 auto;
      }
    }
    
    .eco-chain {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      transform: none;
      width: 100%;
      margin-bottom: $spacing-large;
    }
  }
}

@media (max-width: 768px) {
  .hero-section {
    .hero-title {
      font-size: 36px;
    }
  }
  
  .section-title {
    font-size: $font-size-large;
  }
  
  .timeline-item {
    flex: 0 0 250px;
    
    .timeline-year {
      width: 60px;
      height: 60px;
      font-size: $font-size-medium;
    }
  }
}
</style>